<template>
  <div class="step">
    <div class="circle">
      <!-- <a
        class="block ml-6 text-slate-400 hover:text-slate-500 dark:hover:text-slate-300">
      </a> -->
      <SvgIcon name="svg-more" size="small" color="#999999" />
    </div>
    <div class="line"></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const a = ref(0)
</script>

<style lang="less" scoped>
@import url("@/styles/index.less");

.step {
  width: 20px;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  position: absolute;
  left: -20px;
  top: -40px;
  // top: -5px;
  .circle {
    // width: 15px;
    // height: 15px;
    // border-radius: 15px;
    // background-color: @primary-color;
  }

  .line {
    width: 2px;
    height: 40px;
    background-color: @my-green;
  }
}

// .header {
//   height: 30px;
//   font-size: 1.2rem;
//   position: relative;
//   padding-left: 10px;

//   &::before {
//     content: "";
//     display: block;
//     width: 4px;
//     height: 4px;
//     background-color: @my-green;
//     position: absolute;
//     left: 0;
//     top: 14px;
//     border-radius: 50%;
//   }
// }
</style>
